import React from 'react';
import { useState, useEffect, useMemo } from 'react';
import { connect, history, useRequest } from 'umi';
import TextField from '@mui/material/TextField';
import { alpha, styled } from '@mui/material/styles';
import styles from './index.less';
import SubmitBtn from '@/components/SubmitBtn';
import { change_phone } from '@/services/login';
import { isPoneAvailable } from '@/utils';
import { InfoCircleOutlined } from '@ant-design/icons';
import BackIcon from '@/components/BackIcon';

const CssTextField = styled(TextField)({
  '& label.Mui-focused': {
    color: '#fff',
  },
  '& label': {
    color: '#fff',
  },
  '& .MuiInput-underline:after': {
    borderBottomColor: '#fff',
  },
  '& .MuiOutlinedInput-root': {
    borderRadius: 8,

    '& fieldset': {
      borderColor: '#fff',
    },
    '&:hover fieldset': {
      borderColor: '#fff',
    },
    '&.Mui-focused fieldset': {
      borderColor: '#fff',
    },
  },
});

let Auth = (props) => {
  let [tel, ctel] = useState(''),
    [tels, ctels] = useState(''),
    [focus, cfocus] = useState(false);

  useEffect(() => {
    /**
     *3D海洋效应与 Canvas2D
     * 您可以更改注释 "效果属性" 下的属性
     */
    // Init Context
    let c = document.getElementById('canvas').getContext('2d');
    let canvas = c.canvas;
    let vertices = [];

    // Effect Properties
    let vertexCount = 4000;
    let vertexSize = 3;
    let oceanWidth = 400;
    let oceanHeight = -60;
    let gridSize = 32;
    let waveSize = 16;
    let perspective = 100;

    // Common variables
    let depth = (vertexCount / oceanWidth) * gridSize;
    let frame = 0;
    let { sin, cos, tan, PI } = Math;
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;

    // Render loop
    let loop = () => {
      let rad = (sin(frame / 100) * PI) / 20;
      let rad2 = (sin(frame / 50) * PI) / 10;
      frame++;

      var grd = c.createLinearGradient(0, 0, 0, 170); //这是一个从左到右的渐变
      grd.addColorStop(0, '#00a6fe');
      grd.addColorStop(0.5, '#0084fe');
      grd.addColorStop(1, '#007afe');

      c.fillStyle = grd;
      c.fillRect(0, 0, canvas.width, canvas.height);
      c.save();
      c.translate(canvas.width / 2, canvas.height / 2);
      c.beginPath();
      vertices.forEach((vertex, i) => {
        let ni = i + oceanWidth;
        let x = vertex[0] - (frame % (gridSize * 2));
        let z =
          vertex[2] -
          ((frame * 2) % gridSize) +
          (i % 2 === 0 ? gridSize / 2 : 0);
        let wave =
          cos(frame / 45 + x / 50) -
          sin(frame / 20 + z / 50) +
          sin(frame / 30 + (z * x) / 10000);
        let y = vertex[1] + wave * waveSize;
        let a = Math.max(0, 1 - Math.sqrt(x ** 2 + z ** 2) / depth);
        let tx, ty, tz;

        y -= oceanHeight;

        // Transformation variables
        tx = x;
        ty = y;
        tz = z;

        // Rotation Y
        tx = x * cos(rad) + z * sin(rad);
        tz = -x * sin(rad) + z * cos(rad);

        x = tx;
        y = ty;
        z = tz;

        // Rotation Z
        tx = x * cos(rad) - y * sin(rad);
        ty = x * sin(rad) + y * cos(rad);

        x = tx;
        y = ty;
        z = tz;

        // Rotation X

        ty = y * cos(rad2) - z * sin(rad2);
        tz = y * sin(rad2) + z * cos(rad2);

        x = tx;
        y = ty;
        z = tz;

        x /= z / perspective;
        y /= z / perspective;

        if (a < 0.01) return;
        if (z < 0) return;

        c.globalAlpha = a;
        c.fillStyle = `hsl(${180 + wave * 20}deg, 100%, 50%)`;
        c.fillRect(
          x - (a * vertexSize) / 2,
          y - (a * vertexSize) / 2,
          a * vertexSize,
          a * vertexSize,
        );
        c.globalAlpha = 1;
      });
      c.restore();

      requestAnimationFrame(loop);
    };

    // Generating dots
    for (let i = 0; i < vertexCount; i++) {
      let x = i % oceanWidth;
      let y = 0;
      let z = (i / oceanWidth) >> 0;
      let offset = oceanWidth / 2;
      vertices.push([(-offset + x) * gridSize, y * gridSize, z * gridSize]);
    }

    loop();
  }, []);

  let { run, loading } = useRequest(change_phone, {
    debounceWait: 300, //防抖
    manual: true,
    formatResult: (res) => res,
    onSuccess: (result, params) => {
      if (result.code == 0) {
        history.goBack();
      }
    },
  });

  let isph = useMemo(() => {
    return isPoneAvailable(tel);
  }, [tel]);

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        overflow: 'hidden',
        position: 'relative',
      }}
    >
      <BackIcon></BackIcon>
      <canvas
        style={{ width: '100%', height: '100%', position: 'absolute' }}
        id="canvas"
      ></canvas>
      <div className={styles.content}>
        <img
          src={require('@/assets/logo.png')}
          alt=""
          className={styles.logo}
        />
        <img
          src={require('@/assets/title_change.png')}
          alt=""
          className={styles.title}
        />

        <div
          className="center"
          style={{
            flexDirection: 'column',
            width: '80%',
            margin: '0 auto',
            position: 'relative',
          }}
        >
          {!isph && tel && (
            <p
              style={{
                textAlign: 'left',
                width: '100%',
                color: '#84f6f3',
                position: 'absolute',
                bottom: 60,
              }}
            >
              <InfoCircleOutlined style={{ marginRight: 4 }} />
              手机号错误
            </p>
          )}
          <CssTextField
            fullWidth
            onFocus={() => {
              cfocus(true);
            }}
            onBlur={() => {
              cfocus(false);
            }}
            style={{ marginBottom: 12 }}
            label="请输入原手机号"
            id="custom-css-outlined-input"
            InputProps={{
              style: { color: '#fff' },
            }}
            value={tel}
            onChange={(e) => {
              ctel(e.target.value);
            }}
          />

          <CssTextField
            fullWidth
            onFocus={() => {
              cfocus(true);
            }}
            onBlur={() => {
              cfocus(false);
            }}
            style={{ marginBottom: 36 }}
            label="请输入新手机号"
            id="custom-css-outlined-input"
            InputProps={{
              style: { color: '#fff' },
            }}
            value={tels}
            onChange={(e) => {
              ctels(e.target.value);
            }}
          />

          <SubmitBtn
            loading={loading}
            style={{
              height: 60,
              borderRadius: 8,
              overflow: 'hidden',
            }}
            click={() => {
              run({ origin_phone: tel, phone: tels });
            }}
          >
            修改
          </SubmitBtn>
        </div>
      </div>
      <img
        style={{ opacity: focus ? 1 : 1, transition: 'all 0.4s' }}
        src={require('@/assets/bindbg.png')}
        alt=""
        className={styles.bind}
      />
    </div>
  );
};

export default Auth;
